<template>
  <div class="typeManage">
    <button
      style="float:left"
      class="add-btn"
      size="mini"
      type="primary"
      @click="addType"
    >
      增加
    </button>
    <compTable
      ref="table"
      size="mini"
      :table-height="500"
      :stripe="false"
      :show-checkbox="false"
      :table-header="tableHeader"
      :table-data="tableData"
      :show-menu="false"
      :show-search="true"
      :page-data="pageData"
    />

    <el-dialog
      :title="diaTitle"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="专栏名称" prop="name" style="margin-bottom: 20px">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="专栏描述">
          <el-input v-model="form.desc" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submit">确 定</el-button>
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addCommunityType, delCommunityType, getCommunityType, setCommunityType } from '@/api/blog'
import { ParamArr, SQLTable } from '../../../../public/js/paramarr'
let that
export default {
  name: 'TypeManage',
  data() {
    return {
      diaTitle: '新增',
      dialogVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入专栏名称', trigger: 'blur' }
        ]
      },
      tableHeader: [
        { prop: 'name', label: '专栏名称', width: 120 },
        { prop: 'desc', label: '专栏描述', width: 'auto' },
        { prop: 'title', label: '操作', width: 150, align: 'center', render(h, { row }) {
          return (
            <span>
              <el-button plain class='el-btn el-btn-small el-btn-waring' size='mini' nativeOnclick={() => that.editType(row)}>修改</el-button>
              <el-button plain class='el-btn el-btn-small el-btn-danger' size='mini' nativeOnclick={() => that.delType(row)}>删除</el-button>
            </span>
          )
        } }
      ],
      form: {
        id: '',
        name: '',
        desc: ''
      },
      tableData: [], // 专栏列表
      cellStyle: {
        backgroundColor: '#f5f7fa',
        color: '#606266'
      },
      pageData: {
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    that = this
    this.getTypeList()
  },
  methods: {
    getTypeList() {
      this.$showLoading()
      const vPar = new ParamArr()
      getCommunityType(vPar).then(vPar => {
        const nodes = []
        const table = new SQLTable(vPar.getTable('k_shop_forumtype'))
        table.first()
        while (!table.eof()) {
          const node = {}
          node['id'] = table.getValueByName('ID')
          node['name'] = table.getValueByName('Name')
          node['desc'] = table.getValueByName('Desc')
          nodes.push(node)
          table.next()
        }
        this.tableData = nodes
        setTimeout(() => {
          this.$closeLoading()
        }, 500)
      }).catch(err => {
        this.$closeLoading()
        console.log(err)
      })
    },
    refresh() {
      this.getTypeList()
    },
    close() {
      if (globalConfig.IS_AOM_WEB) {
        top.$('#myTab li.active .closeTab').click()
      } else {
        this.$store.dispatch('tagsView/delView', this.$route)
        this.$router.go(-1)
      }
    },
    addType() {
      this.diaTitle = '新增'
      this.form = { id: '', name: '', desc: '' }
      this.dialogVisible = true
    },
    editType(item) {
      this.diaTitle = '编辑'
      this.dialogVisible = true
      this.form = { ...item }
    },
    delType(item) {
      this.$comfirmDialog({
        message: `是否将“${item.name}”删除?`,
        confirm: () => {
          const vPar = new ParamArr()
          vPar.setStr('ID', item.id)
          delCommunityType(vPar).then(vPar => {
            this.getTypeList()
          })
        }
      })
    },
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const vPar = new ParamArr()
          vPar.setStr('Name', this.form.name)
          vPar.setStr('Desc', this.form.desc)

          if (this.diaTitle == '新增') {
            addCommunityType(vPar).then(vPar => {
              this.$message({ type: 'success', message: '新增成功' })
              this.dialogVisible = false
              this.form = { id: '', name: '', desc: '' }
              this.$refs['form'].resetFields()
              this.getTypeList()
            })
          } else {
            vPar.setStr('ID', this.form.id)
            setCommunityType(vPar).then(vPar => {
              this.$message({ type: 'success', message: '编辑成功' })
              this.dialogVisible = false
              this.form = { id: '', name: '', desc: '' }
              this.$refs['form'].resetFields()
              this.getTypeList()
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.typeManage {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 10px;
}
.add-btn {
  width: 96px;
	height: 30px;
	background-color: $primaryColor;
	font-size: 14px;
	color: #ffffff;
  outline: none;
  border: none;
  cursor: pointer;
}
::v-deep.el-table--border th {
  background-color: #bec6d3!important;
}
</style>
